<template>
  <div class="addbanner">
    <a-form
      :model="formState"
      v-bind="layout"
      name="nest-messages"
      :validate-messages="validateMessages"
      @finish="onFinish"
    >
      <a-form-item
        :name="['user', 'name']"
        label="标题"
        :rules="[{ required: true }]"
      >
        <a-input v-model:value="formState.user.name" />
      </a-form-item>
      <a-form-item :name="['user', 'email']" label="网址">
        <a-input v-model:value="formState.user.url" />
      </a-form-item>

      <a-form-item :name="['user', 'website']" label="简介">
        <a-input v-model:value="formState.user.intro" />
      </a-form-item>
      <a-form-item label="状态">
        <a-switch v-model:checked="formState.user.status" />
      </a-form-item>
      <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button type="primary" html-type="submit">重置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, reactive } from "vue";
import { addbanner } from "../api/user_api";
import { notification } from 'ant-design-vue';
import {useRouter} from 'vue-router'
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const router =useRouter()
const validateMessages = {
  required: "请输入标题",
};

const formState = reactive({
  user: {
    name: "",
    url: "/uploads/9242cd0c70f96299ca70a5e93d2433c91634374944719.jpg",
    intro: "",
    createdAt: "2022-06-22T12:12:24.400Z",
    status: false,
    pic: "/uploads/9242cd0c70f96299ca70a5e93d2433c91634374944719.jpg",
  },
});
//提交创建
const onFinish = () => {
  addbanner(formState.user).then((res: any) => {
    console.log(res.status);
    if(res.status == '201'){
         notification['success']({
        message: '添加成功',
        description:
          'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      });
      router.go(-1)
    }
  });
};

//图片
</script>

<style scoped lang="scss">
.addbanner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  // justify-content: center;
  padding: 20px;
  .ant-row {
    width: 1000px;
  }
  .ant-btn {
    margin-left: 15px;
  }
}
</style>